<template>
	<div>
		<el-upload
			ref="upload"
			:action="uploadUrl"
			:class="props.classArr"
			:on-success="handleSuccess"
			list-type="picture-card"
			v-model:file-list="fileList"
			:show-file-list="false"
			:multiple="props.multiple"
			:before-upload="beforeAvatarUpload"
			:on-error="handleError"
			:limit="props.limit"
			:type="props.type"
			:on-exceed="handleExceed"
			v-loading="state.loading"
		>
			<slot></slot>
		</el-upload>
	</div>
</template>

<script setup lang="ts">
import { ElMessage, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
import { reactive, ref, watch } from 'vue';
const uploadUrl = import.meta.env.VITE_API_URL + '/xj-member/box/boxFileUpload';
const props = defineProps({
	data: {
		type: Object,
	},
	Image: {
		type: Object,
	},
	limit: {
		type: Number,
		default: 1,
	},
	type: {
		// 1:图片 2:视频 3:图片和视频
		type: Number,
		default: 1,
	},
	classArr: {
		type: Array,
		default: () => [],
	},
	multiple: {
		type: Boolean,
		default: false,
	},
});
watch(
	() => props.Image,
	(newValue) => {
		state.Image = newValue;
	},
	{
		deep: true,
	}
);
let state = reactive({
	ruleForm: {
		fileList: [] as Array<any>,
	},
	Image: {} as any,
	loading: false,
});
const fileList = ref<any[]>([]);
const upload = ref<UploadInstance>();
const emit = defineEmits(['handlePictureCardPreview', 'onSuccess']);
const handleSuccess: UploadProps['onSuccess'] = (response: any) => {
	state.Image = response.data;
	if (state.ruleForm.fileList.length > 0) {
		state.ruleForm.fileList[0].snapUrl = state.Image.snapUrl;
	}

	state.loading = false;
	emit('onSuccess', state);
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	state.Image = {};
	const ImageFormatRegex = /\.(jpeg|jpg|gif|png)$/i;
	const videoFormatRegex = /\.(mp4|avi|mov|flv|wmv|mkv|quicktime)$/i;
	const videoOrimageFormatRegex = /\.(mp4|avi|mov|flv|wmv|mkv|quicktime|jpeg|jpg|gif|png)$/i;
	let regex: any = {
		1: ImageFormatRegex,
		2: videoFormatRegex,
		3: videoOrimageFormatRegex,
	};
	let message: any = {
		1: '请上传jpg,png,gif,webp',
		2: '请上传mp4,avi,mov,flv,wmv,mkv,quicktime',
		3: '请上传mp4,avi,mov,flv,wmv,mkv,quicktime,jpg,png,gif,webp',
	};

	if (!regex[props.type].test(rawFile.name)) {
		ElMessage.error(message[props.type]);
		return false;
	}
	if (rawFile.size / 1024 / 1024 > 1024) {
		ElMessage.error('视频和图片大小不得超过 1G!');
		return false;
	}
	state.loading = true;
	return true;
};
const handleError: UploadProps['onError'] = () => {
	fileList.value = [];
	state.Image = {};
	state.loading = false;
	ElMessage.error('文件上传失败');
};
const handleExceed: UploadProps['onExceed'] = (files) => {
	const file = files[0] as UploadRawFile;
	if (fileList.value[0].name === file.name && fileList.value[0].size === file.size) {
		ElMessage.warning('图片重复上传');
		state.loading = false;
		return;
	}
	upload.value!.clearFiles();
	file.uid = genFileId();
	upload.value!.handleStart(file);
	upload.value!.submit();
};
</script>

<style scoped lang="scss">
</style>
